<!-- author: xuett -->
<!-- date: 2025-06-24 09:13:38 -->
<!-- description: 楼层 -->
<template>
  <div ref="container" class="container" @click="selectCabinet"></div>
</template>

<script setup>
import TWEEN from "@tweenjs/tween.js";
import Viewer from "@/hooks/viewer.js";
import postprocessing from "@/hooks/postprocessing.js";
import createFloor from "@/utils/createFloor.js";

let viewerIns = null,
  postprocessingIns = null,
  floorGroup = null;
let curRoom = null;

const container = ref(null);
const state = reactive({
  showPostProcessing: true,
  baseUrl: "http://47.113.185.182:7374",
  floorInfo: {
    createTime: "2024-06-25 10:54:10",
    updateTime: "2024-08-16 15:05:23",
    remark: "一层",
    id: 4297,
    name: "一层",
    parentId: 4296,
    locationType: 5,
    mapUrl: "/profile/upload/2024/08/03/编组 15@2x_20240803185513A001.png",
    floorLevel: 5
  }
});

onMounted(() => {
  init();
});

var animationId;
onUnmounted(() => {
  // 清理资源
  cancelAnimationFrame(animationId);
  if (viewerIns) {
    viewerIns.dispose();
  }
});

//初始化
const init = async () => {
  viewerIns = new Viewer(container);
  // 创建后处理效果
  if (state.showPostProcessing) {
    postprocessingIns = new postprocessing(viewerIns, container);
  }

  let floor = await createFloor(state.floorInfo);
  floorGroup = floor;
  viewerIns.setRaycasterObjects(floorGroup.children);
  viewerIns.scene.add(floor);

  // 处理窗口大小调整
  window.addEventListener("resize", () => onWindowResize());
  animate();
};

// 窗口大小调整处理函数
const onWindowResize = () => {
  const width = container.value.clientWidth;
  const height = container.value.clientHeight;
  viewerIns.resize(width, height);
  postprocessingIns.resize(width, height);
};

// 动画循环
const animate = () => {
  animationId = requestAnimationFrame(animate);

  // 使用后处理合成器渲染场景
  if (state.showPostProcessing) {
    postprocessingIns.render();
  } else {
    //不使用后处理，直接渲染场景
    viewerIns.render();
  }
  TWEEN.update(); // 更新 TWEEN 动画
};

const selectCabinet = (mouseEvent) => {
  let intersectObj = viewerIns.getRaycasterIntersectObjects(mouseEvent);
  if (intersectObj && intersectObj.name !== "floor_base") {
    const room = intersectObj.parent;
    // 切换该对象的高亮状态
    if (state.showPostProcessing) {
      postprocessingIns.toggleOutline(room);
    }
    if (room !== curRoom) {
      selectObject(room, mouseEvent);
    }
  } else if (curRoom) {
    deselectObject();
  }
};

const selectObject = (object, mouseEvent) => {
  deselectObject(); // 取消之前选中的对象
  curRoom = object;

  //显示信息窗
  state.curRackInfo = object.userData;
  state.planePos.left = mouseEvent.clientX + "px";
  state.planePos.top = mouseEvent.clientY + "px";
  state.planePos.hasDisplay = Object.keys(object.userData).length ? true : false;
};

const deselectObject = () => {
  state.planePos.hasDisplay = false;
};
</script>

<style scoped lang="scss">
.container {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
